import React, { useRef, useEffect } from "react";

class Child1 extends React.Component {
  render() {
    return <div>child1子组件</div>;
  }
}

const Child2 = React.forwardRef((props, ref) => {
  return <div ref={ref}>child2子组件</div>;
});

// useRef可以用来获取dom节点
// 也可以获取子组件(类组件)的实例
// 也可以结合forwardRef获取子组件(函数组件)的dom节点
const App = () => {
  const ipt = useRef();
  const child1 = useRef();
  const child2 = useRef();

  useEffect(() => {
    console.log(ipt.current);
    console.log(child1.current);
    console.log(child2.current);
  }, []);

  return (
    <>
      <h2>useRef</h2>
      <input type="text" ref={ipt} />
      <Child1 ref={child1} />
      <Child2 ref={child2} />
    </>
  );
};

export default App;
